<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>滚轮事件示例</title>
    <style>
        #box {
            width: 100px;
            height: 100px;
            background-color: red;
            transition: height 0.2s; /* 添加动画过渡效果 */
        }
    </style>
</head>
<body>
<div id="box"></div>
</body>
<script>
    window.onload = function () {
        //获取box元素
        var box = document.getElementById("box");

        //初始高度
        var currentHeight = 100

        //添加滚轮事件
        box.onwheel = function (event) {
            //浏览器兼容处理
            event = event || window.event;

            //获取滚轮滚动方向,返回一个数字，1向上滚，-1向下滚
            var number = Math.sign(event.deltaY);
            if (number === -1) {
                //向下滚动，盒子变长
                currentHeight += 10;
            } else if (number === 1) {
                //向上滚动，盒子变短
                currentHeight -= 10;
            }

            if (currentHeight < 20) {
                currentHeight = 20;
            }

            //更新盒子高度
            box.style.height = currentHeight + "px";

        }


    };
</script>
</html>
